<template>
  <div class="content">
    <vxe-toolbar class="toolbar">
      <template #buttons>
        <vxe-button @click="importDataEvent">导入数据</vxe-button>
        <vxe-button @click="exportDataEvent">导出数据</vxe-button>
        <vxe-button @click="clearDataEvent">清空数据</vxe-button>
      </template>
    </vxe-toolbar>
    <div class="tabla-content">
      <vxe-grid
        border="true,"
        resizable="true,"
        ref="xGrid"
        height="350"
        stripe
        align="center"
        :data="tableData"
        :columns="columns"
        @edit-closed="editClosedEvent"
        :export-config="{}"
        :edit-config="{
          trigger: 'dblclick',
          mode: 'row',
          showUpdateStatus: true,
        showInsertStatus: true,
        }"
      >
        <template #operation="{ row }">
          <vxe-button status="danger" @click="daleteBtn(row)" content="删除"></vxe-button>
        </template>
      </vxe-grid>
    </div>

    <div class="yiny">
      <TinyMce
        ref="Timymces"
        id="timymces"
        :height="200"
        :context="form.konwledge"
        placeholder="输入内容"
      ></TinyMce>
    </div>

    <div class="adder">
      <div></div>
      <el-button type="primary" @click="addBtn">提交</el-button>
    </div>
  </div>
</template>

<script>
import TinyMce from "@/components/tinymce/TinyMce.vue";
export default {
  components: {
    TinyMce,
  },
  data() {
    return {
      form: {
        konwledge: "",
      },

      tableData: [
        { konwledge: "今天闲来没事，想喝奶茶。。。。" },
        { konwledge: "明天闲来没事，想喝奶茶。。。。" },
        { konwledge: "后天闲来没事，想喝奶茶。。。。" },
        { konwledge: "未来闲来没事，想喝奶茶。。。。" },
      ],
      columns: [
        { type: "checkbox", width: 60 },
        {
          field: "konwledge",
          title: "知识描述",
          sortable: true,
          editRender: { name: "input", attrs: { placeholder: "请输入知识描述" } },
        },
        { title: "操作", width: 100, slots: { default: "operation" } },
      ],
    };
  },
  methods: {
    //删除
    daleteBtn(row) {
      this.$msgbox({
        message: "您确定要删除吗",
        title: "确认删除",
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        showCancelButton: true,
        type: "error",
      })
        .then(() => {
          this.$message({
            message: "删除成功",
            type: "success",
          });
        })
        .catch(() => {
          this.$message({
            message: "取消删除",
            type: "info",
          });
        });
    },
    // 清空数据
    clearDataEvent() {
      this.tableData = [];
    },
    // 导出数据
    exportDataEvent() {
      this.$refs.xGrid.openExport({
        // 默认勾选源
        original: true,
      });
    },
    // 导入数据
    importDataEvent() {
      this.$refs.xGrid.importData();
    },
    editClosedEvent({row}){
      console.log(row);
    },
    async addBtn() {
      const $table = this.$refs.xGrid;
      const str = this.$refs.Timymces.tinymceHtml;
      const num = str.indexOf("/") - 2;
      this.form.konwledge = str.slice(3, num);
      this.tableData.push(this.form);
      await $table.reloadData(this.tableData); //加载数据并清除所有状态
    },
  },
};
</script>

<style lang="less" scoped>
.content {
  width: 100%;
  height: 100%;
  .tabla-content {
    width: 100%;
    margin-top: 20px;
  }
}
.toolbar {
  padding-left: 10px;
  box-sizing: border-box;
  width: 100%;
}
.adder {
  height: 80px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
}
.yiny {
  margin-top: 20px;
  width: 100%;
}
</style>